import React, {useState, useEffect} from 'react'
import {Practice} from '../Practice'
import {Menu} from 'antd';
import {Route, Switch, Redirect, BrowserRouter as Router} from 'react-router-dom';

const {Item, SubMenu, ItemGroup} = Menu

function Setting() {
    return (<>
        <div>设置页面</div>
    </>)
}

export default function () {
    const [selectKey, setKey] = useState<React.Key>('practice')

    return (<>
        <Menu selectedKeys={['selectKey']} onClick={(e) => setKey(e.key)} mode={'horizontal'}>
            <Item key={'setting'}>
                设置页面
            </Item>
            <Item key={'practice'}>
                练习页面
            </Item>


        </Menu>

        <Router>
            <Switch>
                <Route exact path={'/'} component={Practice}/>
                <Route path={'/setting'} component={Setting}/>
                <Redirect to={'/'}/>
            </Switch>
        </Router>

        {/*<Practice/>*/}

    </>)

}

